Day 24 阿嬤帶你探索 CSS！（1）

14th鐵人賽

anquan

2022-10-08 18:30:48

302 瀏覽

分享至

Day 24 阿嬤帶你探索 CSS！（1）

嘿嘍

在前幾章中，我們有預告今天要來和大家玩 CSS（本人也是初學，有錯請各位大師改正一下謝謝）
本次主題，會分成三個階段，分別是，「概念」、「實作」、「進階」請大家拭目以待。

CSS 的世界

CSS（階層樣式表 , Cascading Stylesheets 簡稱 CSS。）是一個負責幫忙管理頁面的美感
設計，簡單來講，就是幫忙美化網頁的，不讓網頁看起來平平無奇、沒有靈魂。
也可以把它想像成人類的化妝品，用來點綴人類的臉蛋，當然每個人對美的說法都不一致，所以
你學 CSS 也可以鍛鍊你的美感（本人是蠻喜歡美術的啦XDD）你看，一舉兩得，多好。在這邊跟大家講，我不用講大家應該也知道，就是 CSS 不是程式語言！！我有很長一段時間一直以為
CSS 是個程式語言XDD，但 CSS 是標誌語言喔！（這可能就是沒學好 CSS 的後果吧）而目前 CSS 已經發布到第三版同時也是目前最廣為使用的版本，因此大家常聽到的 CSS3 其實就是指第三版的 CSS 喔！

style attribute(inline style)

在上程式碼之前，先跟大家講一下，CSS 也是有很多不同的寫法，這邊就不一一列出來了，
而我們這個主題的程式碼，大部分都會使用這個方法來寫，為什麼呢？原因就是因為簡單又最直觀的
寫法，誰會不喜歡簡單的寫法呢？所以本人才會選它，回到剛剛，我們剛剛不是有說 CSS 有層級之
分嗎，我就直接亮出程式碼了：

<!DOCTYPE html>
<html>
<head></head>
  
<style>
  .york{
    color: pink;
  }
  #s {
    color: purple;
  }
  </style>
  
<body>

  <p class="york">Joanne是美女</p>
  <p class="york" id="s">恩欣是阿婆</p>
  <p class="york" id="了解" style="color: blue;">Joanne 是世紀無敵大美女</p>
</body>
  
</html>

輸出如下：